<template>
  <view class="container">
	<xk-header :headerbg="true" class="header" :back="false" title="服务台"></xk-header>
	<view class="top-localtion"><u-icon name="map-fill" size="20" color="#1684FC"></u-icon> <text class="dwtext">黄埔区科学大道162号创意大厦</text></view>
	<u-row customStyle="margin:30rpx 20rpx 30rpx 20rpx;" gutter="15">
		<u-col span="6">
			<view class="box1" @click="gotoUrl" data-url="/pagesB/build_access/index">
				<image class="iconbox" mode="widthFix" :src="(imgUrl+'/wx/icon-1.png')" ></image>
				<view>大楼门禁</view>
			</view>
		</u-col>
		<u-col span="6">
			<view class="box1" @click="gotoUrl" data-url="/pagesB/elevator/index">
				<image class="iconbox" mode="widthFix" :src="(imgUrl+'/wx/icon-2.png')" ></image>
				<view>电梯</view>
			</view>
		</u-col>
	</u-row>
	<u-row customStyle="margin:30rpx 20rpx 30rpx 20rpx;" gutter="15">
		<u-col span="6">
			<view class="box1" @click="temporarilyInactive" data-url="/pagesB/toilet/index">
				<image class="iconbox" mode="widthFix" :src="(imgUrl+'/wx/icon-3.png')" ></image>
				<view>洗手间</view>
			</view>
		</u-col>
		<u-col span="6">
			<view class="box1" @click="temporarilyInactive" data-url="/pagesB/meeting/index">
				<image class="iconbox" mode="widthFix" :src="(imgUrl+'/wx/icon-4.png')" ></image>
				<view>会议室</view>
			</view>
		</u-col>
	</u-row>
	<u-row customStyle="margin:30rpx 20rpx 30rpx 20rpx;" gutter="15">
		<u-col span="12">
			<view class="box5" @click="gotoUrl" data-url="/pagesB/parking/index"><image class="iconbox" mode="widthFix" :src="(imgUrl+'/wx/icon-5.png')" ></image> <view class="tcctext">停车场服务</view></view>
		</u-col>
	</u-row>
  </view>
</template>

<script>
  /* import { setCartTabBadge } from '@/core/app'
  import * as Api from '@/api/page'
  import Page from '@/components/page' */

  const App = getApp()

  export default {
    components: {},
    data() {
      return {
		  imgUrl:this.$config.BASE_imgUrl,
        // 页面参数
        options: {},
        // 页面属性
        page: {},
        // 页面元素
        items: []
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 当前页面参数
      this.options = options
      // 加载页面数据
      //this.getPageData();
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
    },

    methods: {
		//暂无页面显示
		temporarilyInactive(){
			this.$util.toast('该功能暂未开放使用')
		},
	  gotoUrl(e){
		  console.log(e);
		var weburl=e.currentTarget.dataset.url;
		//在起始页面跳转到test.vue页面并传递参数
		uni.navigateTo({
			url:weburl
		});
	  },
      /**
       * 加载页面数据
       * @param {Object} callback
       */
      getPageData(callback) {
        const app = this
        const pageId = app.options.pageId || 0
        Api.detail(pageId)
          .then(result => {
            // 设置页面数据
            const { data: { pageData } } = result
            app.page = pageData.page
            app.items = pageData.items
            // 设置顶部导航栏栏
            app.setPageBar();
          })
          .finally(() => callback && callback())
      },

      /**
       * 设置顶部导航栏
       */
      setPageBar() {
        const {
          page
        } = this
        // 设置页面标题
        uni.setNavigationBarTitle({
          title: page.params.title
        });
        // 设置navbar标题、颜色
        uni.setNavigationBarColor({
          frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
          backgroundColor: page.style.titleBackgroundColor
        })
      },

    },

    /**
     * 下拉刷新
     */
    onPullDownRefresh() {
      // 获取首页数据
      this.getPageData(() => {
        uni.stopPullDownRefresh()
      })
    },

    /**
     * 分享当前页面
     */
    onShareAppMessage() {
      const app = this
      const { page } = app
      return {
        title: page.params.share_title,
        path: "/pages/index/index?" + app.$getShareUrlParams()
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      const app = this
      const { page } = app
      return {
        title: page.params.share_title,
        path: "/pages/index/index?" + app.$getShareUrlParams()
      }
    }

  }
</script>

<style lang="scss" scoped>
   page{
		background:#F5F5F5!important;
	}
  .container {
    background: #F5F5F5;
  }
  .top-localtion{
	  margin:30rpx;
	  background:#FFFFFF;
	  padding:30rpx;
	  border-radius:12rpx;
	  display: flex;
	  box-shadow: 4px 4px 8px 0px rgba(240, 239, 244, 100);
	  .dwtext{
		  margin-left:10rpx;
		  color: #101010;
		  font-size:28rpx;
	  }
  }
  .box1{
	 background:#FFFFFF;
	 text-align:center;
	 padding:50rpx 0 50rpx 0;
	 font-size:32rpx;
	 border-radius:20rpx;
	 box-shadow: 4px 4px 8px 0px rgba(240, 239, 244, 100);
  }
  .box5{
  	 background:#FFFFFF;
  	 text-align:center;
	 display: flex;
	 padding:40rpx 0 40rpx 40rpx;
	 font-size:32rpx;
	 border-radius:20rpx;
	 vertical-align: middle;
	 line-height:120rpx;
	 box-shadow: 4px 4px 8px 0px rgba(240, 239, 244, 100);
	 .tcctext{
		 margin-left:20rpx;
	 }
  }
  .iconbox{
	  width:120rpx;
	  height:120rpx;
  }
</style>
